/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="index_class">
		<u-form :model="form" ref="uForm" class="u-m-20" :error-type="['toast']">
			<u-form-item :label="$t('类型')" prop="typeValue">
				<u-input v-model="form.typeValue" type="select" :placeholder="$t('请选择')" input-align="right"
					@click="typeListShow = true" />
				<u-select v-model="typeListShow" :list="typeList" @confirm="confirmType"></u-select>
			</u-form-item>
			<u-form-item label-position="top" :label="$t('投诉/建议内容')" prop="content">
				<u-input type="textarea" height="100" maxlength="600" :placeholder="$t('请填写投诉/建议内容')" v-model="form.content" />
			</u-form-item>
			<u-form-item label-position="left" :label="$t('上传凭证')" prop="photo" label-width="150">
				<u-upload width="160" height="160" max-count="6" :action="upLoadAction" :form-data="formData" :upload-text="$t('选择图片')"
					@on-success="uploadSuccess" ref="uUpload"></u-upload>
			</u-form-item>
			<u-button type="error" shape="circle" @click="submit">{{$t('提交')}}</u-button>
		</u-form>
	</view>
</template>


<script>
	var maxNum = 9,
		_self;
	export default {
		data() {
			return {
				form: {
					typeValue: '',
					content: ''
				},
				rules: {
					typeValue: [{
						required: true,
						message: this.$t('请选择投诉建议类型'),
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					content: [{
						required: true,
						message:  this.$t('请填写投诉建议内容'),
						trigger: ['blur'],
					}]
				},
				typeListShow: false,
				typeList: [{
						value: this.$t('建议'),
						label: this.$t('建议')
					},
					{
						value: this.$t('投诉'),
						label: this.$t('投诉')
					},
					{
						value: this.$t('鼓励'),
						label: this.$t('鼓励')
					},
					{
						value: this.$t('举报主播'),
						label: this.$t('举报主播')
					},
					{
						value: this.$t('举报客服'),
						label: this.$t('举报客服')
					}
				],
				formData: {},
				upLoadAction: this.$baseUrl + 'api/Common/uploadPic',
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.formData = this.$http.returnCommonParams('api/Common/uploadPic', 'feedback')
		},


		methods: {
			confirmType(e) {
				this.form.typeValue = e[0].value
			},
			uploadSuccess(e) {


			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let pics = []
						let feedbackPics = []
						// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
						pics = this.$refs.uUpload.lists.filter(val => {
							return val.progress == 100;
						})
						if (pics.length == 0) {
							this.$toast(this.$t('请上传凭证'))
						}
						pics.forEach((e, i) => {
							feedbackPics[i] = e.response.data.path
						})
						this.$http.addReport({
							title: this.form.typeValue,
							content: this.form.content,
							pic: feedbackPics.join(',')
						}).then(res => {
							if (res.status == 200) {
								this.$toast(res.mess)
								setTimeout(() => {
									this.getback()
								}, 1000)
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			}

		}
	}
</script>
<style lang="scss" scoped>
	@import '~uview-ui/index.scss';

	.index_class {
		background-color: #FFFFFF;
	}
</style>
